<template>
  <div class="myBuyList">
    <view class="input_my_list">
      <uv-input
        shape="circle"
        :customStyle="{ width: '100%', background: '#F5F6F8', border: 'none' }"
        placeholderClass="placeholderClassss"
        placeholder="搜索相关订单"
        prefixIcon="search"
        prefixIconStyle="font-size: 24rpx;color: #909399"
      ></uv-input>
    </view>

    <view class="nav">
      <uv-tabs
        :current="currentState"
        :list="listNav"
        lineWidth="30"
        lineColor="#DF0024"
        :activeStyle="{
          color: '#DF0024',
          fontWeight: 'bold',
          transform: 'scale(1.1)',
          fontSize: '24rpx',
        }"
        :inactiveStyle="{
          color: '#8D8D8D',
          transform: 'scale(1)',
          fontSize: '24rpx',
        }"
        itemStyle="padding-left: 27rpx; padding-right: 27rpx; height: 34px;"
        @click="Change"
      ></uv-tabs>
    </view>

    <view v-if="myBuyList.length > 0 " class="list_my_list">
      <view
        @click.stop.prevent="gotoListDetail(item)"
        v-for="(item, index) in myBuyList"
        :key="index"
        class="content_shop_car"
        
      >
        <view v-if="item.status == 1" class="state">
          <view> 待付款</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>
        <view v-if="item.status == 2" class="state">
          <view> 待发货</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>
        <view v-if="item.status == 3" class="state">
          <view> 待收货</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>
        <view v-if="item.status == 5" class="state">
          <view> 已完成</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>
        <view v-if="item.status == 6" class="state">
          <view> 退款成功</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>


        <view v-if="item.refundApprovalStatus == 0" class="state">
          <view> 商家正在审核</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>

        <view v-if="item.refundApprovalStatus == 1" class="state">
          <view> 商家同意退款</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>

        <view v-if="item.refundApprovalStatus == 2" class="state">
          <view> 商家拒绝退款</view>
          &nbsp;
          <view><uv-icon size="10" name="arrow-right"></uv-icon></view>
        </view>
      

        <div style="display: flex" class="header_title">
          <view class="view_image">
            <uv-image
              :lazy-load="true"
              src="/static/fz.png"
              width="24rpx"
              height="24rpx"
            ></uv-image>
          </view>
          &nbsp;
          <view style="font-size: 25rpx" class="text_s"
            >订单编号：{{ item.shopName }}</view
          >
        </div>

        <view class="list_shop">
          <view class="iamge_s">
            <uv-image
              :lazy-load="true"
              :src="item.imgUrl"
              mode="heightFix"
              height="144rpx"
            ></uv-image>
          </view>

          <view class="content_box">
            <view class="font_shop">{{ item.goodsTitle }} </view>

            <view class="tag_shop"
              >{{ item.goodsSpecification || "无规格" }}
              <span style="font-size: 20rpx; color: #818181"
                >× {{ item.num }}</span
              >
            </view>

            <view class="price_box_shope">
              <view class="price">￥{{ item.goodsPrice }}</view>
              <view class="numberbox"> </view>
            </view>
          </view>
        </view>

        <view class="bottom_content_s">
          <view v-if="item.status == 5" class="view_flex">
            <view class="view_image">
              <uv-icon name="trash-fill" width="24rpx" height="24rpx"></uv-icon>
            </view>

            <view @click.stop="DelDing(item.orderNumber)" class="text_s"
              >删除订单</view
            >
            &nbsp; &nbsp;
            <view class="text_s"
              >共{{ item.num }}件商品，合计：￥{{ item.goodsPrice }}</view
            >
          </view>
          <view v-if="item.status !== 5" class="view_flex">
            <view class="text_s"
              >共{{ item.num }}件商品，合计：￥{{ item.goodsPrice }}</view
            >
          </view>

          <view v-if="item.status == 1" class="right_button">
            <uv-button
              @tap.stop="cancelD(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="info"
              :plain="true"
              text="取消订单"
            ></uv-button>
            &nbsp;
            <uv-button
              @click="gotoPay(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="立即支付"
            ></uv-button>
          </view>

          <view v-if="item.status == 2" class="right_button">
            <uv-button
            v-if="item.refundStatus==0"
              @tap.stop="cancelTk(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="info"
              :plain="true"
              text="退款"
            ></uv-button>
            <uv-button
            v-if="item.refundStatus==1"
              
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="提交退款正在处理中..."
            ></uv-button>
            <uv-button
            v-if="item.refundStatus==2"
              @tap.stop="cancelTk(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="info"
              :plain="true"
              text="再次退款"
            ></uv-button>
          </view>

          <view v-if="item.status == 3" class="right_button">
            <uv-button
            v-if="item.refundStatus==0"
             @tap.stop="cancelTk(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="info"
              :plain="true"
              text="退款"
            ></uv-button>
            <uv-button
            v-if="item.refundStatus==1"
              
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="提交退款正在处理中..."
            ></uv-button>
            &nbsp;
            <uv-button
            v-if="item.refundStatus==0"
              @tap.stop="submit(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="确认收货"
            ></uv-button>
          </view>

          <view v-if="item.status == 5" class="right_button">
            <uv-button
            v-if="item.refundStatus==0"
             @tap.stop="cancelTk(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="info"
              :plain="true"
              text="退款"
            ></uv-button>
            <uv-button
            v-if="item.refundStatus==1"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="提交退款正在处理中..."
            ></uv-button>
            &nbsp;
            <uv-button
            v-if="item.refundStatus==0"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="再次购买"
            ></uv-button>
          </view>


          <view v-if="item.refundApprovalStatus == 1&&item.expressNo == ''" class="right_button">
            <uv-button
            
             @tap.stop="cancelTk2(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="输入退款单号"
            ></uv-button>
          </view>

          <view v-if="item.refundApprovalStatus == 1&&item.expressNo !== ''" class="right_button">
            <uv-button
            
             @tap.stop="cancelTk2(item)"
              :customTextStyle="{ fontSize: '22rpx' }"
              shape="circle"
              :customStyle="{ height: '45rpx' }"
              size="small"
              type="error"
              :plain="true"
              text="更新退款单号"
            ></uv-button>
          </view>
        </view>
      </view>
    </view>

    <view v-else>
      <uv-empty
        mode="car"
        text="订单为空，快去选购吧"
        icon="https://cdn.uviewui.com/uview/empty/data.png"
      ></uv-empty>
    </view>

    <uv-divider textSize="22rpx" text="为您推荐 猜您喜欢"></uv-divider>

    <view class="list_goods">
      <view
        v-for="(item, index) in recommendListData"
        :key="index"
        @click="gotoDetail(item)"
        class="item"
      >
        <uv-image
        mode='widthFix'
          :lazy-load="true"
          :src="item.imgUrl"
          width="100%"
        
        ></uv-image>
        <view class="item_title">
          <p class="span_p" style="text-align: left; font-size: 24rpx">
            <view v-if="item.tips" class="nianhuo">
              {{ item.tips }}
            </view>
            <text>
              {{ item.goodsTitle }}
            </text>
          </p>
        </view>

        <view class="prive_title">
          <span class="price_red">￥{{ item.goodsPrice }} </span>

          <span class="price_scale">已售{{ index + +item.prodId }}件 </span>
        </view>

        <view style="display: none" class="margin_top_bottom">
          <view class="box1">多人拼团</view>
          <view class="box2">
            <view class="quan">券</view>
            <view class="quan2">满100元减30</view>
          </view>
        </view>

        <view class="shopmall">
          {{ item.shopName }}
          <uv-icon name="arrow-right" color="#8D8D8D" size="12"></uv-icon
        ></view>
      </view>
    </view>

    <uv-popup ref="popup" mode="bottom">
      <view class="content_body_t" style="width: 100%">
        <view class="content_shop_car">
          <div class="header_title">
            <view class="header_title_font_weight">请选择售后类型</view>
            <uv-radio-group v-model="radiovalue" placement="row">
              <uv-radio :name="1" activeColor="red" label="仅退款"></uv-radio>
              &nbsp;&nbsp;
              <uv-radio :name="2" activeColor="red" label="退货退款"></uv-radio>
            </uv-radio-group>
          </div>

          <view v-if="Object.keys(TKDetail).length >= 1" class="list_shop">
            <view class="iamge_s">
              <uv-image
                :src="TKDetail.orderItemDtos[0].pic"
                :lazy-load="true"
                mode="heightFix"
                height="144rpx"
              ></uv-image>
            </view>

            <view class="content_box">
              <view class="font_shop">{{ TKDetail.goodsTitle }} </view>

              <view class="tag_shop"
                >{{ TKDetail.goodsSpecification || "无规格" }}
                <span style="font-size: 20rpx; color: #818181"
                  >× {{ TKDetail.num }}</span
                >
              </view>

              <view class="price_box_shope">
                <view class="price"
                  >￥{{ TKDetail.orderItemDtos[0].price }}</view
                >
                <view class="numberbox"> </view>
              </view>
            </view>
          </view>

          <div class="header_title2">
            <view class="header_title_font_weight">请填写退款原因:</view>
            <uv-input
              v-model="tkyy"
              border="bottom"
              fontSize="22rpx"
              size="small"
              placeholder="请填写退款原因"
            ></uv-input>
          </div>

          <div class="header_title">
            <view class="header_title_font_weight"
              >请上传凭证(最多可上传六张图片):</view
            >
            <uv-upload
              height="130rpx"
              width="130rpx"
              @afterRead="afterRead"
              :fileList="fileList"
              name="3"
              :maxCount="6"
              multiple
              :previewFullImage="true"
            ></uv-upload>
          </div>

          <view style="padding: 20rpx">
            <uv-button
              @click="refundD"
              customTextStyle="font-size:24rpx"
              type="error"
              shape="circle"
              :hairline="true"
              text="提交"
            ></uv-button>
          </view>

          <view v-if='showHeight' class="height_box"></view>
        </view>
      </view>
    </uv-popup>


    <uv-popup ref="popup2" mode="bottom">
      <view class="content_body_t" style="width: 100%">
        <view class="content_shop_car">
         
          <view v-if="Object.keys(TKDetail2).length >= 1" class="list_shop">
            <view class="iamge_s">
              <uv-image
                :src="TKDetail2.orderItemDtos[0].pic"
                :lazy-load="true"
                mode="heightFix"
                height="144rpx"
              ></uv-image>
            </view>

            <view class="content_box">
              <view class="font_shop">{{ TKDetail2.goodsTitle }} </view>

              <view class="tag_shop"
                >{{ TKDetail2.goodsSpecification || "无规格" }}
                <span style="font-size: 20rpx; color: #818181"
                  >× {{ TKDetail2.num }}</span
                >
              </view>

              <view class="price_box_shope">
                <view class="price"
                  >￥{{ TKDetail2.orderItemDtos[0].price }}</view
                >
                <view class="numberbox"> </view>
              </view>
            </view>
          </view>

          <div class="header_title2">
            <view class="header_title_font_weight">请填写物流公司信息:</view>
            <uv-input
              v-model="expressName"
              border="bottom"
              fontSize="22rpx"
              size="small"
              placeholder="物流公司信息"
            ></uv-input>
          </div>

          <div class="header_title2">
            <view class="header_title_font_weight">请填写退款单号:</view>
            <uv-input
              v-model="expressNo"
              border="bottom"
              fontSize="22rpx"
              size="small"
              placeholder="请填写退款单号"
            ></uv-input>
          </div>

         

          <view style="padding: 20rpx">
            <uv-button
              @click="refundD2"
              customTextStyle="font-size:24rpx"
              type="error"
              shape="circle"
              :hairline="true"
              text="提交"
            ></uv-button>
          </view>
        </view>
      </view>
    </uv-popup>
  </div>
</template>

<script setup>
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref, watch } from "vue";
import { getList, del, receipt, cancel, refund ,myRefundOrder,expressInfo} from "../https/api/myBuyList";

import {
  prodTagList,
  getTodayGrab,
  recommendList,
  topNoticeList,
} from "../https/api/index";

let tkyy = ref("");
let fileList = ref([]);
let radiovalue = ref(1);

let showHeight = ref(false)
let expressNo = ref('')
let expressName =ref('')
let refundD2 = async() => {
  var date = new Date(); 
  var year = date.getFullYear();  
    var month = ("0" + (date.getMonth() + 1)).slice(-2);  
    var day = ("0" + date.getDate()).slice(-2);  
    var hours = ("0" + date.getHours()).slice(-2);  
    var minutes = ("0" + date.getMinutes()).slice(-2);  
    var seconds = ("0" + date.getSeconds()).slice(-2);  
    let shipTime =  year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; 
  popup2.value.close();
 let obj = {
  "orderNumber": TKDetail2.value.orderNumber,
  "expressName": expressName.value,
  "expressNo": expressNo.value,
  "shipTime": shipTime
}
console.log(obj)
await expressInfo(obj)
uni.showToast({
      title: "提交成功",
      icon: "none",
    });
getFListData({
      current: 1,
      size: sizeNum.value,
      refundStatus: 1,
    });
}

let refundD = async () => {
  
  let obj = {
    orderNumber: TKDetail.value.orderNumber,
    applyType: radiovalue.value,
    orderItemId: 0,
    photoFiles: fileList.value.map((v) => v.url).join(","),
    buyerMsg: tkyy.value,
  };
  let res = await refund(obj);
  if(!res.fail){
    popup.value.close();
    uni.showToast({
      title: "申请成功",
      icon: "none",
    });
  }else{
    uni.showToast({
      title:'检查是否有未填项',
      icon: "none",
    });
  }
  statusNum.value = 2;

    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
    getFListData({
      current: 1,
      size: sizeNum.value,
      refundStatus: 1,
    });
};

let afterRead = (file, lists, name) => {
  console.log(file.file[0].url);
  file.file.forEach((element) => {
    fileList.value.push({ url: element.url });
  });
};

let popup = ref(null);
let TKDetail = ref({});
let cancelTk = (item) => {
  console.log(TKDetail.value);
  TKDetail.value = item;
  popup.value.open();
};

let popup2 = ref(null);
let TKDetail2= ref({})
let cancelTk2 = (item) => {
 
  TKDetail2.value = item;
  console.log(TKDetail2.value)
  setTimeout(()=>{
    popup2.value.open();
  })
  
};


let recommendListData = ref([]);
let getrecommendList = async (data) => {
  let res = await getTodayGrab(data);
  if (res) {
    recommendListData.value = res.data.records.map((v) => {
      return {
        ...v,
        imgUrl: v.pic,
        goodsPrice: v.price,
        goodsTitle: v.prodName,
      };
    });
  }
};

let gotoPay = (item) => {
  uni.setStorageSync("orderNumbers", item.orderNumber);
};

let submit = async (item) => {
  uni.showModal({
    title: "提示",
    content: "确认要确认收货吗？",
    success: async (res) => {
      if (res.confirm) {
        await receipt(item.orderNumber);
        getListData({
          current: 1,
          size: sizeNum.value,
          status: statusNum.value,
        });
        uni.showToast({
          title: "交易成功",
          icon: "none",
        });
      }
    },
  });
};

let cancelD = (item) => {
  uni.showModal({
    title: "提示",
    content: "确认要取消订单吗？",
    success: async (res) => {
      if (res.confirm) {
        await cancel(item.orderNumber);
        getListData({
          current: 1,
          size: sizeNum.value,
          status: statusNum.value,
        });
        uni.showToast({
          title: "取消成功",
          icon: "none",
        });
      }
    },
  });
};

let DelDing = async (num) => {
  uni.showModal({
    title: "提示",
    content: "确认要删除订单吗？",
    success: async (res) => {
      if (res.confirm) {
        await del(num);
        getListData({
          current: 1,
          size: sizeNum.value,
          status: statusNum.value,
        });
      }
    },
  });
};

let tips = ref({});
let reCom = ref({});
let getprodTagList = async () => {
  let res = await prodTagList();

  let obj2 = res.data.find((v) => v.title.includes("推荐"));

  if (Object.keys(obj2).length > 0) {
    reCom.value = obj2;
  } else {
    reCom.value = res.data[0];
  }

  getrecommendList({ tagId: reCom.value.id, size: 4 });
};

onReachBottom(() => {
  if (totalNum.value >= sizeNum.value) {
    sizeNum.value += 14;
    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
    });
  }
});

let getListData = async (data) => {
  let res = await getList(data);
  if (res) {
    myBuyList.value = res.data.records.map((v) => {
      return {
        ...v,
        goodsTitle: v.orderItemDtos[0].prodName,
        goodsSpecification: v.orderItemDtos[0].skuName,
        goodsPrice: v.actualTotal,
        actuallyPrice: v.actualTotal,
        shippingPrice: 0.0,
        num: v.orderItemDtos[0].prodCount,
        imgUrl: v.orderItemDtos[0].pic,
        shopName: v.orderNumber,
      };
    });
    totalNum.value = res.data.total;
    return myBuyList.value;
  }
};

let getFListData = async (data) => {
  let res = await myRefundOrder(data);
  if (res) {
    myBuyList.value = res.data.records.map((v) => {
      return {
        ...v,
        goodsTitle: v.orderItemDtos[0].prodName,
        goodsSpecification: v.orderItemDtos[0].skuName,
        goodsPrice: v.actualTotal,
        actuallyPrice: v.actualTotal,
        shippingPrice: 0.0,
        num: v.orderItemDtos[0].prodCount,
        imgUrl: v.orderItemDtos[0].pic,
        shopName: v.orderNumber,
      };
    });
    totalNum.value = res.data.total;
    return myBuyList.value;
  }
};

let gotoDetail = (item) => {
  uni.setStorageSync("goodsDetailData", JSON.stringify(item));
  uni.navigateTo({
    url: "/pages/goodsDetail",
  });
};

let currentState = ref(null);

let Change = (index) => {
  currentState.value = index.index;
};

watch(currentState, async () => {
  console.log(currentState.value);
  if (currentState.value == 0) {
    statusNum.value = 0;
    sizeNum.value = 6;
    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
  } else if (currentState.value == 1) {
    statusNum.value = 1;
    sizeNum.value = 6;
    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
  } else if (currentState.value == 2) {
    statusNum.value = 2;
    sizeNum.value = 6;
    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
  } else if (currentState.value == 3) {
    statusNum.value = 3;
    sizeNum.value = 6;
    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
  } else if (currentState.value == 4) {
    statusNum.value = 5;
    sizeNum.value = 6;
    getListData({
      current: 1,
      size: sizeNum.value,
      status: statusNum.value,
    });
  }
  else if (currentState.value == 5) {
    statusNum.value = 5;
    sizeNum.value = 6;
    getFListData({
      current: 1,
      size: sizeNum.value,
      refundStatus: 1,
    });
    
  }
});

let sizeNum = ref(99);
let totalNum = ref(0);
let statusNum = ref(0);
onShow(() => {

  getprodTagList();
});
let gotoListDetail = (item) => {
 
if(item.refundStatus==1){
  currentState.value = 5
}else{
  uni.setStorageSync("listDetailObj", JSON.stringify(item));
  uni.navigateTo({
    url: "/pages/goodsListDetail?state=" + item.state,
  });
}

};

let listNav = ref([
  {
    name: "全部",
  },
  {
    name: "待付款",
  },
  {
    name: "待发货",
  },
  {
    name: "待收货",
  },

  {
    name: "已完成",
  },
  {
    name: "退款中",
  },
]);

let myBuyList = ref([]);

onLoad((option) => {
  uni.onKeyboardHeightChange((e)=>{
    if(e.height==0){
      showHeight.value = false
    }else{
      showHeight.value = true
    }
 
  })
  console.log(option.data);
  currentState.value = Number(option.data);
});
</script>

<style lang="scss" scoped>
.height_box{
  height: 400rpx;
}
.event{
  
pointer-events: none;
}
.header_title_font_weight {
  margin-bottom: 20rpx;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 22rpx;
  color: #000000;
}

.content_body_t {
}
.list_goods {
  padding: 20rpx;
  .prive_title {
    margin-top: 8rpx;
    padding: 0 15rpx;
  }
  .shopmall {
    margin-top: 10rpx;
    display: flex;
    color: #8d8d8d;
    font-size: 22rpx;
    margin-bottom: 20rpx;
    padding: 0 15rpx;
  }
  .margin_top_bottom {
    padding: 0 15rpx;
    margin-bottom: 8rpx;
    margin-top: 6rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .box1 {
      margin-right: 20rpx;
      border: 1px solid #ff1c23;
      width: 85rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #df0024;
      font-size: 18rpx;
    }
    .box2 {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
    }
    .quan {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-right: 1px dashed #ff1c23;
      color: #df0024;
      font-size: 18rpx;
    }
    .quan2 {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-left: none;
      color: #df0024;
      font-size: 18rpx;
    }
  }
  .price_red {
    color: #ff1c23;
    font-size: 31rpx;
  }
  .price_scale {
    margin-left: 20rpx;
    color: #8d8d8d;
    font-size: 22rpx;
  }
  margin-top: 70rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    margin-bottom: 20rpx;
    width: 49%;
    border-radius: 15rpx;
    background: white;
    .item_title {
      font-size: 25rpx;
      padding: 0 15rpx;
      margin-top: 15rpx;

      align-items: center;
    }
    .span_p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .nianhuo {
      display: inline-block;
      border-radius: 10rpx;
      vertical-align: top;
      font-size: 20rpx;
      background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
      width: 54rpx;
      height: 28rpx;
      text-align: center;
      color: white;
      font-weight: bolder;
      line-height: 28rpx;
      display: inline-block;
    }
  }
}
.bottom_content_s {
  .right_button {
    display: flex;
    align-items: center;
  }
  .view_flex {
    display: flex;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 20rpx;
    color: #494949;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding: 20rpx 0;
  padding-bottom: 10rpx;
}

.content_shop_car {
  .SH {
    border-radius: 40rpx;
    border: 1px solid #818181;
    font-size: 22rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #818181;
    display: flex;
    align-items: center;
    position: absolute;
    padding: 2px 8px;
    top: 50%;
    transform: translateY(-50%);
    right: 20rpx;
  }
  .state {
    font-size: 22rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ff1c23;
    display: flex;
    align-items: center;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
  }
  position: relative;
  margin: 20rpx;
  padding: 15rpx;
  border-radius: 15rpx;
  background: white;
  .header_title {
    padding-bottom: 15rpx;
    border-bottom: 1px solid #eee;

    align-items: center;
  }
  .header_title2 {
    padding-bottom: 15rpx;
    // border-bottom: 1px solid #eee;

    align-items: center;
  }
  .gou {
    display: flex;
    align-items: center;

    justify-content: center;
    width: 29rpx;
    height: 29rpx;
    border-radius: 50%;

    background: #ff1c23;
  }
  .no_gou {
    width: 29rpx;
    height: 29rpx;
    border-radius: 50%;
    border: 1px solid #ccc;
  }
}
.list_goods {
  .prive_title {
    margin-top: 8rpx;
    padding: 0 15rpx;
  }
  .shopmall {
    display: flex;
    color: #8d8d8d;
    font-size: 22rpx;
    margin-bottom: 20rpx;
    padding: 0 15rpx;
  }
  .margin_top_bottom {
    padding: 0 15rpx;
    margin-bottom: 8rpx;
    margin-top: 6rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .box1 {
      margin-right: 20rpx;
      border: 1px solid #ff1c23;
      width: 85rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #df0024;
      font-size: 18rpx;
    }
    .box2 {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
    }
    .quan {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-right: 1px dashed #ff1c23;
      color: #df0024;
      font-size: 18rpx;
    }
    .quan2 {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-left: none;
      color: #df0024;
      font-size: 18rpx;
    }
  }
  .price_red {
    color: #ff1c23;
    font-size: 31rpx;
  }
  .price_scale {
    margin-left: 20rpx;
    color: #8d8d8d;
    font-size: 22rpx;
  }
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    margin-bottom: 20rpx;
    width: 49%;
    border-radius: 15rpx;
    background: white;
    .item_title {
      font-size: 25rpx;
      padding: 0 15rpx;
      margin-top: 15rpx;

      align-items: center;
    }
    .span_p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .nianhuo {
      display: inline-block;
      border-radius: 10rpx;
      vertical-align: top;
      font-size: 20rpx;
      background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
      width: 54rpx;
      height: 28rpx;
      text-align: center;
      color: white;
      font-weight: bolder;
      line-height: 28rpx;
      display: inline-block;
    }
  }
}
.price_box_shope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .price {
    color: #ff1c23;
    font-size: 30rpx;
  }

  .minus {
    width: 22px;
    height: 22px;
    border-width: 1px;
    border-color: #e6e6e6;
    border-style: solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
  }
  .input {
    padding: 0 10px;
  }
  .plus {
    width: 22px;
    height: 22px;
    background-color: #fa7a7e;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
  }
}
.tag_shop {
  margin: 15rpx 0;
  border-radius: 50rpx;
  display: inline-block;
  color: #818181;
  font-size: 20rpx;
  padding: 7rpx 15rpx;
  background: #eee;
}
.font_shop {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1; //文字上限行
  -webkit-box-orient: vertical;

  font-size: 24rpx;
}
.content_box {
  width: 100%;
  margin-left: 20rpx;
}

.list_shop {
  background: white;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
}

.list_my_list {
  // margin: 20rpx;
}
.myBuyList {
  min-height: 100vh;
  background-color: #f5f6f8;
}
.nav {
  background: white;
  padding: 0 20rpx;
}
.input_my_list {
  background: white;
  padding: 20rpx;
}
</style>